<template>
  <div class="table_container">
    <el-table
      ref="multipleTable"
      v-loading="isLoading"
      :height="tableMaxHeight"
      :row-class-name="tableRowClassName"
      :data="tableData"
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
      border
      tooltip-effect="dark">
      <el-table-column
        width="40"
        type="selection"
        :selectable="selectableFn"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        show-overflow-tooltip
        label="参数项目">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        :resizable="false"
        align="center"
        min-width="40">
        <template slot-scope="scope">
          {{templateValueType.find(v => v.id === scope.row.type).label}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CompareTempTable',
  data() {
    return {
      isLoading: false,
      tableData: [],
      selectItems: [], // 选中的数据
    }
  },
  computed: {
    templateValueType() {
      return this.$store.state.dict.TemplateValueType.labels || []
    }
  },
  methods: {
    selectableFn(row) {
      return row.isAdd === false
    },
    init(list = []) {
      this.tableData = list
    },
    handleSelectionChange(selection) {
      this.selectItems = selection
    },
    clearSelection() {
      this.$refs.multipleTable.clearSelection()
    },
    tableRowClassName({row}) {
      if (row.isAdd) return 'is_add'
      return this.$highlightSelectedRow(row, this.selectItems, 'tag')
    },
    handleRowClick(row) {
      if (row.isAdd) return
      this.$refs.multipleTable.toggleRowSelection(row)
    }
  }
}
</script>

<style lang="less">
  .table_container .is_add .cell {
    color: #a1b1c1;
  }
</style>
